<template>
  <div class="title-block">
    {{ title }}
    <el-button 
      @click="toggleExpand" 
      link 
      class="expand-btn" 
      size="mini"
      v-if="showExpandBtn"
    >
      {{ modelValue ? '收起' : '展开' }}
      <el-icon style="margin-left: 5px;">
        <ArrowDown v-if="modelValue" />
        <ArrowRight v-else />
      </el-icon>
    </el-button>
    <el-button v-if="moreBtn" @click="moreHandler" link class="more-btn" size="mini">更多></el-button>
  </div>
</template>

<script>
import { ArrowDown, ArrowRight } from '@element-plus/icons-vue'

export default {
  name: 'TitleBlock',
  components: {
    ArrowDown,
    ArrowRight
  },
  props: {
    title: {
      type: String,
      default: '模块标题'
    },
    moreBtn: {
      type: Boolean,
      default: true
    },
    link: {
      type: String,
      default: ''
    },
    modelValue: {
      type: Boolean,
      default: true
    },
    showExpandBtn: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:modelValue'],
  methods: {
    moreHandler() {
      window.open('https://www.h3yun.com/application/D001729axy20rsfk5k9fndomy/' + this.link)
    },
    toggleExpand() {
      this.$emit('update:modelValue', !this.modelValue)
    }
  }
}
</script>

<style lang="scss" scoped>
.title-block {
  width: 320px;
  height: 36px;
  line-height: 35px;
  padding-left: 65px;
  background: url(@/assets/images/screen/module-title-bg.png) no-repeat;
  background-size: 100% 100%;
  font-size: 18px;
  color: #ffffff;
  font-weight: 600;
  position: relative;
  
  .expand-btn {
    margin-left: 20px;
    position: relative;
    top: 25%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    padding: 0;
    min-height: auto;
    &:hover {
      color: #00a6ff;
    }
  }
  
  .more-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 400;
    &:hover {
      color: #00a6ff;
    }
  }
}
</style>
